<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<uni-search-bar 
				v-model="searchKeyword" 
				placeholder="搜索污染事件或工厂"
				@search="onSearch"
				@clear="onClear"
			></uni-search-bar>
		</view>
		
		<!-- 筛选条件 -->
		<view class="filter-section">
			<view class="filter-item" :class="{ active: filterType === 'all' }" @click="setFilter('all')">
				<text>全部</text>
			</view>
			<view class="filter-item" :class="{ active: filterType === 'water' }" @click="setFilter('water')">
				<text>水污染</text>
			</view>
			<view class="filter-item" :class="{ active: filterType === 'air' }" @click="setFilter('air')">
				<text>大气污染</text>
			</view>
		</view>
		
		<!-- 污染事件列表 -->
		<scroll-view scroll-y class="event-list">
			<view class="event-item" v-for="event in filteredEvents" :key="event.id" @click="showEventDetail(event)">
				<view class="event-header">
					<view class="event-type" :class="event.type">
						<text>{{ getTypeText(event.type) }}</text>
					</view>
					<view class="event-severity" :class="event.severity">
						<text>{{ getSeverityText(event.severity) }}</text>
					</view>
				</view>
				<view class="event-content">
					<text class="event-title">{{ event.title }}</text>
					<text class="event-location">📍 {{ event.location }}</text>
					<text class="event-time">🕒 {{ formatTime(event.time) }}</text>
				</view>
				<view class="event-footer">
					<text class="event-factory">🏭 {{ event.factory }}</text>
					<view class="event-status" :class="event.status">
						<text>{{ getStatusText(event.status) }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 地图按钮 -->
		<view class="map-button" @click="showMap">
			<uni-icons type="location" size="24" color="#ffffff"></uni-icons>
			<text class="map-text">查看地图</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const searchKeyword = ref('')
const filterType = ref('all')

const eventList = ref([
	{
		id: 1,
		title: '化工厂废水泄漏事件',
		location: '东城区工业园',
		factory: '东城化工厂',
		type: 'water',
		severity: 'high',
		status: 'handling',
		time: new Date(),
		description: '化工厂废水处理设备故障，导致部分废水泄漏到附近河流',
		affectedArea: '东城区河流下游2公里',
		pollutants: '重金属、有机物'
	},
	{
		id: 2,
		title: '钢铁厂废气超标排放',
		location: '西城区工业区',
		factory: '西城钢铁厂',
		type: 'air',
		severity: 'medium',
		status: 'confirmed',
		time: new Date(Date.now() - 3600000),
		description: '钢铁厂烟囱排放的废气中二氧化硫浓度超标',
		affectedArea: '西城区及周边3公里',
		pollutants: '二氧化硫、氮氧化物'
	},
	{
		id: 3,
		title: '化工厂管道破裂',
		location: '朝阳区化工园',
		factory: '朝阳化工厂',
		type: 'water',
		severity: 'high',
		status: 'handled',
		time: new Date(Date.now() - 7200000),
		description: '化工厂地下管道破裂，导致化学物质泄漏',
		affectedArea: '朝阳区地下水系统',
		pollutants: '苯、甲苯、二甲苯'
	},
	{
		id: 4,
		title: '电厂烟尘排放异常',
		location: '海淀区电厂',
		factory: '海淀电厂',
		type: 'air',
		severity: 'low',
		status: 'handled',
		time: new Date(Date.now() - 10800000),
		description: '电厂除尘设备故障，导致烟尘排放量增加',
		affectedArea: '海淀区及周边1公里',
		pollutants: '烟尘、颗粒物'
	},
	{
		id: 5,
		title: '化工厂储罐泄漏',
		location: '丰台区化工区',
		factory: '丰台化工厂',
		type: 'water',
		severity: 'medium',
		status: 'confirmed',
		time: new Date(Date.now() - 14400000),
		description: '化工厂储罐阀门故障，导致化学物质泄漏到土壤',
		affectedArea: '丰台区化工区及周边500米',
		pollutants: '酸类物质、重金属'
	}
])

// 计算属性
const filteredEvents = computed(() => {
	let events = eventList.value
	
	// 按类型筛选
	if (filterType.value !== 'all') {
		events = events.filter(event => event.type === filterType.value)
	}
	
	// 按关键词搜索
	if (searchKeyword.value) {
		const keyword = searchKeyword.value.toLowerCase()
		events = events.filter(event => 
			event.title.toLowerCase().includes(keyword) ||
			event.factory.toLowerCase().includes(keyword) ||
			event.location.toLowerCase().includes(keyword)
		)
	}
	
	return events
})

onMounted(() => {
	loadEvents()
})

// 加载事件数据
const loadEvents = () => {
	console.log('加载污染事件数据...')
}

// 搜索事件
const onSearch = (keyword) => {
	console.log('搜索关键词:', keyword)
}

// 清除搜索
const onClear = () => {
	searchKeyword.value = ''
}

// 设置筛选条件
const setFilter = (type) => {
	filterType.value = type
}

// 显示事件详情
const showEventDetail = (event) => {
	uni.showModal({
		title: event.title,
		content: `工厂: ${event.factory}\n位置: ${event.location}\n类型: ${getTypeText(event.type)}\n严重程度: ${getSeverityText(event.severity)}\n状态: ${getStatusText(event.status)}\n时间: ${formatTime(event.time)}\n描述: ${event.description}\n影响区域: ${event.affectedArea}\n污染物: ${event.pollutants}`,
		confirmText: '查看地图',
		cancelText: '关闭',
		success: (res) => {
			if (res.confirm) {
				showMap(event)
			}
		}
	})
}

// 显示地图
const showMap = (event) => {
	uni.navigateTo({
		url: `/pages/map/map?eventId=${event ? event.id : ''}`
	})
}

// 获取类型文本
const getTypeText = (type) => {
	const typeMap = {
		water: '水污染',
		air: '大气污染'
	}
	return typeMap[type] || '未知'
}

// 获取严重程度文本
const getSeverityText = (severity) => {
	const severityMap = {
		low: '轻微',
		medium: '中等',
		high: '严重'
	}
	return severityMap[severity] || '未知'
}

// 获取状态文本
const getStatusText = (status) => {
	const statusMap = {
		confirmed: '已确认',
		handling: '处理中',
		handled: '已处理'
	}
	return statusMap[status] || '未知'
}

// 格式化时间
const formatTime = (time) => {
	const date = new Date(time)
	const month = (date.getMonth() + 1).toString().padStart(2, '0')
	const day = date.getDate().toString().padStart(2, '0')
	const hours = date.getHours().toString().padStart(2, '0')
	const minutes = date.getMinutes().toString().padStart(2, '0')
	return `${month}-${day} ${hours}:${minutes}`
}
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(135deg, #f8fffe 0%, #e8f5f0 100%);
}

.search-bar {
	padding: 20rpx;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 4rpx 20rpx rgba(46, 125, 50, 0.1);
	backdrop-filter: blur(10px);
}

.filter-section {
	display: flex;
	padding: 20rpx;
	gap: 20rpx;
	background: rgba(255, 255, 255, 0.95);
	border-top: 1rpx solid #e8f5e8;
	backdrop-filter: blur(10px);
}

.filter-item {
	flex: 1;
	text-align: center;
	padding: 20rpx;
	border-radius: 12rpx;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border: 2rpx solid #e8f5e8;
	font-size: 24rpx;
	color: #666;
	transition: all 0.3s;
	font-weight: 500;
	
	&.active {
		background: linear-gradient(135deg, #2E7D32, #4CAF50);
		color: #ffffff;
		border-color: #2E7D32;
		box-shadow: 0 2rpx 10rpx rgba(46, 125, 50, 0.3);
	}
}

.event-list {
	flex: 1;
	padding: 20rpx;
}

.event-item {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border: 2rpx solid #e8f5e8;
	border-radius: 15rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(46, 125, 50, 0.1);
	transition: all 0.3s;
	position: relative;
	
	&:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 10rpx rgba(46, 125, 50, 0.2);
	}
	
	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 6rpx;
		border-radius: 15rpx 0 0 15rpx;
		background: linear-gradient(to bottom, #4CAF50, #2E7D32);
	}
}

.event-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.event-type {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 20rpx;
	
	&.water {
		background-color: #e3f2fd;
		color: #1976d2;
	}
	
	&.air {
		background-color: #fff3e0;
		color: #f57c00;
	}
}

.event-severity {
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 20rpx;
	
	&.low {
		background-color: #e8f5e8;
		color: #4cd964;
	}
	
	&.medium {
		background-color: #fff3e0;
		color: #f0ad4e;
	}
	
	&.high {
		background-color: #ffebee;
		color: #dd524d;
	}
}

.event-content {
	margin-bottom: 20rpx;
}

.event-title {
	font-size: 26rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 15rpx;
	display: block;
}

.event-location, .event-time {
	font-size: 22rpx;
	color: #666;
	margin-bottom: 10rpx;
	display: block;
}

.event-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.event-factory {
	font-size: 22rpx;
	color: #666;
}

.event-status {
	padding: 6rpx 12rpx;
	border-radius: 15rpx;
	font-size: 20rpx;
	
	&.confirmed {
		background-color: #fff3e0;
		color: #f0ad4e;
	}
	
	&.handling {
		background-color: #e3f2fd;
		color: #1976d2;
	}
	
	&.handled {
		background-color: #e8f5e8;
		color: #4cd964;
	}
}

.map-button {
	position: fixed;
	bottom: 30rpx;
	right: 30rpx;
	width: 120rpx;
	height: 120rpx;
	background-color: #007aff;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.3);
	transition: all 0.3s;
	
	&:active {
		transform: scale(0.95);
	}
}

.map-text {
	font-size: 20rpx;
	color: #ffffff;
	margin-top: 5rpx;
}
</style>
